<template>
  <div class="search_home">
    <div class="singer_album">
      <div class="singer">
        <div class="head">
          <div class="title">艺人</div>
          <div @click="toDetail(keyWord, 'singer')" class="toAll">查看全部</div>
        </div>
        <SearchSinger></SearchSinger>
      </div>
      <div class="album">
        <div class="head">
          <div class="title">专辑</div>
          <div @click="toDetail(keyWord, 'album')" class="toAll">查看全部</div>
        </div>
        <SearchAlbum></SearchAlbum>
      </div>
    </div>
    <div class="songs">
      <div class="head">
        <div class="title">歌曲</div>
        <div @click="toDetail(keyWord, 'song')" class="toAll">查看全部</div>
      </div>
      <SearchSong></SearchSong>
    </div>
    <div class="video">
      <div class="head">
        <div class="title">视频</div>
        <div @click="toDetail(keyWord, 'video')" class="toAll">查看全部</div>
      </div>
      <SearchVideo></SearchVideo>
    </div>
    <div class="list">
      <div class="head">
        <div class="title">歌单</div>
        <div @click="toDetail(keyWord, 'list')" class="toAll">查看全部</div>
      </div>
      <SearchList></SearchList>
    </div>
  </div>
</template>

<script>
import SearchAlbum from "@/components/search/SearchAlbum";
import SearchSinger from "@/components/search/SearchSinger";
import SearchSong from "@/components/search/SearchSong";
import SearchVideo from "@/components/search/SearchVideo";
import SearchList from "@/components/search/SearchList";
export default {
  name: "Searchhome",
  components: {
    SearchAlbum,
    SearchSinger,
    SearchSong,
    SearchVideo,
    SearchList,
  },
  data() {
    return {
      keyWord: this.$route.params.keyword,
    };
  },

  mounted() {},

  methods: {
    //跳转至各自详情
    toDetail(keyword, type) {
      switch (type) {
        case 'singer':
          this.$router.push("/searchSingerDetail/" + keyword);
          break;
        case "album":
          this.$router.push("/searchAlbumDetail/" + keyword);
          break;
        case "song":
          this.$router.push("/searchSongDetail/" + keyword);
          break;
        case "list":
          this.$router.push("/searchListDetail/" + keyword);
          break;
        case "video":
          this.$router.push("/searchVideoDetail/" + keyword);
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.search_home {
  padding: 0rem 8rem;
  .head {
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .toAll {
      cursor: pointer;
      font-size: 14px;
      color: rgb(146, 140, 140);
    }
  }
  .singer_album {
    display: flex;
    justify-content: space-between;
    .singer,
    .album {
      width: 47%;
    }
  }
}
</style>